[% extends "base.html" %]

[% block title %]我的待办事项[% endblock %]

[% block content %]
<div class="layui-card">
    <div class="layui-card-header">
        <h2>我的待办事项</h2>
        <button class="layui-btn" onclick="showAddTodoModal()">
            <i class="layui-icon">&#xe654;</i> 添加待办
        </button>
    </div>
    <div class="layui-card-body">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">全部</li>
                <li>未完成</li>
                <li>已完成</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table class="layui-table" id="allTodos" lay-filter="allTodos"></table>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-table" id="activeTodos" lay-filter="activeTodos"></table>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-table" id="completedTodos" lay-filter="completedTodos"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加/编辑待办事项的模态框 -->
<div class="layui-form" id="todoModal" style="display: none; padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="请输入描述" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="todoForm">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>

<!-- 表格工具条模板 -->
<script type="text/html" id="allTodosBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    {{# if(d.completed == false){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="complete">完成</a>
    {{# } }}
</script>

<script type="text/html" id="activeTodosBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="complete">完成</a>
</script>

<script type="text/html" id="completedTodosBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="uncomplete">取消完成</a>
</script>
[% endblock %]

[% block extra_js %]
<script src="[[ url_for('static', filename='js/todos.js') ]]"></script>
[% endblock %] 